<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M512 240C178.704 240 12.304 483.872 5.376 494.256c-7.168 10.752-7.168 24.752 0 35.504C12.304 540.128 178.704 784 512 784s499.696-243.872 506.624-254.256c7.168-10.752 7.168-24.752 0-35.504C1011.696 483.872 845.296 240 512 240zM512 720C263.888 720 115.744 565.152 72.192 511.936 115.6 458.608 262.976 304 512 304c248.112 0 396.256 154.848 439.808 208.064C908.4 565.392 761.024 720 512 720zM512 368c-79.408 0-144 64.608-144 144s64.592 144 144 144 144-64.608 144-144S591.408 368 512 368zM512 592c-44.112 0-80-35.888-80-80s35.888-80 80-80 80 35.888 80 80S556.112 592 512 592z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(39,38,54)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
